<template>
  <div class="bg-content">
    <div class="box">
      <!-- <div class="nav"></div> -->
      <div class="header">
        <div class="info-title">
          <div class="info-title-head">
            <div class="logo">
              <img src="../../../../assets/img/main/user.jpg" alt="" />
            </div>
            <div class="name">
              {{ name }}
            </div>
          </div>
          <div class="card" v-if="idtype == 1">
            身份证: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 4">
            港澳居民来往内地通行证:
            {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 6">
            出生证: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 7">
            台胞居住证:
            {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 2">
            军官证: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 3">
            护照: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 5">
            医保卡: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
          <div class="card" v-if="idtype == 99">
            其他: {{ cardid.replace(/(\w{4})\w*(\w{4})/, "$1**********$2") }}
          </div>
        </div>
        <div class="replace" @click="gochoice()">
          <img src="../../../../assets/img/main/replace.png" alt="" />
        </div>
      </div>
      <div class="banner">
        <div class="list">
          <div class="left">
            <span>医</span>
            <span>院</span>
          </div>
          <span class="right">{{ info.hspNme }}</span>
        </div>
        <div class="list">
          <div class="left">
            <span>科</span>
            <span>室</span>
          </div>
          <span class="right">{{ info.classq }}</span>
        </div>
        <div class="list">
          <div class="left">
            <span>医</span>
            <span>生</span>
          </div>
          <span class="right">{{ info.name }}</span>
        </div>
        <div class="list">
          <span class="left">就诊日期</span>
          <span class="right">{{ info.date }}</span>
        </div>
        <div class="list">
          <span class="left">就诊时间</span>
          <span class="right">{{ info.time }}</span>
        </div>
        <div class="list">
          <div class="left">
            <span>诊</span>
            <span>疗</span>
            <span>费</span>
          </div>
          <span class="right">{{ info.treatfee }}元</span>
        </div>
        <div class="list">
          <div class="left">
            <span>挂</span>
            <span>号</span>
            <span>费</span>
          </div>
          <span class="right">{{ info.registerFee }}元</span>
        </div>
      </div>
      <div class="footer">
        <div class="careful">注意事项</div>
        <p>• 停诊将短信通知，请保持手机畅通</p>
        <p>• 实名制预约，就诊人的信息不符将无法取号</p>
        <p>• 当天的号源无法取消</p>

        <div class="choose">
          <button class="bt-left" @click="back()">重新挂号</button>
          <button class="bt-right" @click="shore()">确认挂号</button>
        </div>
      </div>
    </div>

    <van-popup
      v-model="showpop"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
      ><div class="pop">
        <div class="poptitle">选择就诊人</div>
        <div class="userlist">
          <div
            class="useritem"
            :class="{ active: active == item.id }"
            v-for="(item, index) in userlist"
            :key="index"
            @click="chooseuser(item)"
          >
            {{ item.name }}
          </div>
          <div class="add" @click="addpep()"><u>添加就诊人</u></div>
        </div>
      </div></van-popup
    >
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import { addOrderApi } from "@/service/api.js";
import { Popup } from "vant";
import { getUserinfoApi, addtypeApi } from "@/service/api.js";
import { loginByWxOpenidApi } from "@/service/api.js";
export default {
  name: "index",

  data() {
    return {
      apptoken: "",
      token: "",
      name: "",
      active: "",
      appoInfo: "",
      userinfo: {},
      userid: "",
      info: {},
      cardid: "",
      nmaeid: "",
      sourceId: "", //号源id
      timeIntervalId: "",
      openid: "",
      departmentId: "",
      doctorId: "",
      unid: "",
      showpop: true,
      idtype: "", //小时段id
      list: [],
      userlist: "",
      phone: "",
      sex: "",
      qrCodeText: ""
    };
  },
  components: {},
  mounted() {
    window.onpageshow = function(e) {
      console.log("执行了onpageshow");
      if (
        e.persisted ||
        (window.performance && window.performance.navigation.type == 2)
      ) {
        window.location.reload();
      }
    };
  },
  created() {
    // window.localStorage.removeItem("info1");
    // 拿取apptoken
    this.doctorId = this.$route.query.doctorId;
    this.departmentId = this.$route.query.departmentId;
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      (this.name = JSON.parse(localStorage.getItem("name"))),
      (this.cardid = JSON.parse(localStorage.getItem("cardid"))),
      (this.nameid = JSON.parse(localStorage.getItem("nameid"))),
      (this.idtype = JSON.parse(localStorage.getItem("idtype"))),
      (this.token = localStorage.getItem("token"));

    // 拿取联系人
    // localStorage.getItem("userinfo"),
    //   (this.userinfo = JSON.parse(localStorage.getItem("userinfo"))),
    //   console.log(this.userinfo);
    this.info = JSON.parse(localStorage.getItem("info"));
    console.log(this.info);
    this.sourceId = this.info.sourceId;
    this.timeIntervalId = this.info.timeIntervalId;
    console.log(this.timeIntervalId);
    console.log(this.sourceId);
    console.log(this.info);
    if (this.token) {
      this.getuserinfo();
    } else {
      this.showpop = false;

      Dialog.confirm({
        title: "提示",
        message: "需前往登录页面完成登录"
      })
        .then(() => {
          this.$router.push({
            name: "login"
          });
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.go(-1);
        });
    }
  },
  methods: {
    addpep() {
      this.showpop = false;
      let apptoken = JSON.parse(localStorage.getItem("apptoken"));

      addtypeApi({
        apptoken: apptoken,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          if (res.data.isJumpHealthCard == 0) {
            this.$router.push({
              name: "add_doctor"
            });
          } else if (res.data.isJumpHealthCard == 1) {
            window.location = res.data.link;
          }
        }
      });
    },
    chooseuser(item) {
      this.name = item.name;
      this.cardid = item.cardno;
      this.idtype = item.cardtype;
      this.phone = item.phone;
      this.sex = item.sex;
      this.userid = item.id;
      this.qrCodeText = item.qrCodeText;
      this.showpop = false;
      this.active = item.id;
    },
    // 获取默认就诊人
    getuserinfo() {
      let apptoken = JSON.parse(localStorage.getItem("apptoken"));
      getUserinfoApi({
        apptoken: apptoken,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          if (res.data.list.length > 0) {
            this.userlist = res.data.list;
            this.name = this.userlist[0].name;
            this.active = this.userlist[0].id;
            this.cardid = this.userlist[0].cardno;
            this.idtype = this.userlist[0].cardtype;
            this.phone = this.userlist[0].phone;
            this.sex = this.userlist[0].sex;
            this.userid = this.userlist[0].id;
            this.cardid = this.userlist[0].cardno;
            this.qrCodeText = this.userlist[0].qrCodeText;
            console.log("收到就好的" + this.qrCodeText);
          } else {
            this.showpop = false;
            Dialog.confirm({
              title: "提示",
              message: "您还未添加就诊人，是否添加？"
            })
              .then(() => {
                //添加就诊人
                let apptoken = JSON.parse(localStorage.getItem("apptoken"));

                addtypeApi({
                  apptoken: apptoken,
                  token: this.token
                }).then(res => {
                  console.log(res);
                  if (res.code == 4000) {
                    if (res.data.isJumpHealthCard == 0) {
                      this.$router.push({
                        name: "add_doctor"
                      });
                    } else if (res.data.isJumpHealthCard == 1) {
                      window.location = res.data.link;
                    }
                  }
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
                this.$router.go(-1);
              });
          }
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");

          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
              this.$router.go(-1);
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    // 返回,重新选择
    back() {
      // window.localStorage.removeItem("info1");
      window.localStorage.removeItem("info");
      window.localStorage.removeItem("name");
      window.localStorage.removeItem("nameid");
      window.localStorage.removeItem("cardid");
      // window.localStorage.removeItem("info1");
      window.localStorage.removeItem("idtype");
      // this.$router.push({
      //   name: "doctor_info",
      //   query: {
      //     doctorId: this.doctorId,
      //     departmentId: this.departmentId,
      //   },
      // });
      this.$router.go(-1);
    },
    // 确认挂号
    shore() {
      addOrderApi({
        token: this.token,
        apptoken: this.apptoken,
        userId: this.userid,
        sourceId: this.sourceId,
        timeIntervalId: this.timeIntervalId,
        name: this.name,
        phone: this.phone,
        cardType: this.idtype,
        cardNo: this.cardid,
        sex: this.sex,
        qrCodeText: this.qrCodeText
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          this.appInfo = res.data;

          // Toast.success("预约成功");
          // this.name=res.data.name

          let info = {
            // name: this.appInfo.name, //医生姓名
            // hspNme: this.appInfo.hspNme, //医院名称
            // time: this.appInfo.time, //号源时间
            // date: this.appInfo.year, //年月日
            // classq: this.appInfo.departmentName, //科室
            // qhmode: this.appInfo.qhmode,
            // qhtime: this.appInfo.qhtime,
            // week: this.appInfo.week, //周?
            // spot: this.appInfo.spot, //号源id
            // treatfee: this.appInfo.treatFee,
            // url: this.appInfo.url,
            // date: this.appInfo.treatDate,
            // hspNme: this.appInfo.hospitalName,
            orderId: this.appInfo.orderId
            // registerFee: this.appInfo.registerFee,
            // doctorName: this.appInfo.doctorName,
            // stopCancelTime: this.appInfo.stopCancelTime,
            // stopOrderTime: this.appInfo.stopOrderTime,
          };
          localStorage.setItem("info1", JSON.stringify(info));
          if (this.appInfo.url) {
            window.location.href = this.appInfo.url;
          } else {
            setTimeout(() => {
              this.$router.push({
                name: "App_over"
              });
            }, 1000);
          }

          //                   if( this.appInfo.url){
          // //        Dialog.confirm({
          // //   title: '订阅',
          // //   message: '是否订阅河南预约挂号平台',
          // // })
          // //   .then(() => {
          //     window.location.href = this.appInfo.url;
          // //   })
          // //   .catch(() => {
          // //     // on cancel
          // //   });
          //     }else{
          //       console.log('没有url')
          //     }
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });

      // this.$router.push({
      //   name:"register_message",
      //   query:{
      //     info:JSON.stringify(this.info)
      //   }
      // })
    },
    // 选择就诊人
    gochoice() {
      this.showpop = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.van-popup--bottom {
  width: 10rem;
  left: calc(50% - 5rem);
}
.bg-content {
  .pop {
    width: 100%;
    font-size: 0.4rem;
    .poptitle {
      width: 10rem;
      text-align: center;
      font-size: 0.45rem;
      font-weight: bold;
      line-height: 1rem;
    }
    .userlist {
      margin-top: 0.2rem;
      width: 100%;
      .useritem {
        width: 50%;
        margin: 0 auto;
        border: 1px solid #07c6b4;
        text-align: center;
        line-height: 0.8rem;
        font-size: 0.4rem;
        color: #07c6b4;
        margin-top: 0.2rem;
        border-radius: 0.1rem;
      }
      .active {
        background-color: #07c6b4;
        color: #fff;
      }
      .add {
        width: 100%;
        text-align: center;
        line-height: 1rem;
        font-size: 0.45rem;
        color: #07c6b4;
      }
    }
  }
  .box {
    width: 100%;
    // height: 100vh;
    background: #f6f6f6;
    // overflow-x: auto;
    padding-bottom: 50px;
    // .nav {
    //   height: 44px;
    // }
    .header {
      width: 100%;
      height: 2.5rem;
      background: #ffffff;
      display: flex;
      align-items: center;
      margin-top: 1rem;
      margin-bottom: 0.2rem;
      // overflow: hidden;
      .info-title {
        margin-left: 0.2rem;
        .info-title-head {
          display: flex;
          align-items: center;
          // margin-top: -10px;
          margin-bottom: 0.1rem;
          .name {
            height: 1rem;
            line-height: 1rem;
            font-size: 0.45rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            // margin-right: 10px;
          }
          .logo {
            width: 1rem;
            height: 1rem;
            // margin-top: -20px;
            margin-right: 0.2rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .card {
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
        }
      }
      .replace {
        width: 1rem;
        height: 1rem;
        background: #07c6b4;
        border-radius: 50%;
        position: relative;
        margin-left: auto;
        margin-right: 0.2rem;
        img {
          display: block;
          width: 0.5rem;
          height: 0.5rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .banner {
      width: 100%;
      background: #ffffff;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      .list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        .left {
          margin-left: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
        }
        .right {
          margin-right: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .footer {
      .careful {
        font-size: 0.4rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #07c6b4;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        margin-left: 0.2rem;
      }
      p {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        margin-left: 0.2rem;
        margin-bottom: 0.1rem;
      }
      .choose {
        padding-top: 0.5rem;
        display: flex;
        justify-content: space-evenly;
        .bt-left {
          width: 4rem;
          height: 1.2rem;
          background: #ffffff;
          border: 1px solid #07c6b4;
          border-radius: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #07c6b4;
        }
        .bt-right {
          width: 4rem;
          height: 1.2rem;
          background: #07c6b4;
          border-radius: 0.2rem;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          border: none;
        }
      }
    }
  }
}
</style>
